<template>
  <el-col :span="3">
    <h3>{{ isCollapse ? "系统" : "超市管理系统" }}</h3>

    <div class="head-portrait" v-if="userInfo">
      <div class="block" v-if="!isCollapse">
        <img :src="origin + userInfo.avatar_url" />
      </div>
      <div class="block" v-else>
        <img
          :src="origin + userInfo.avatar_url"
          style="width: 30px; height: 30px"
        />
      </div>
      <p>{{ userInfo.username }}</p>
    </div>

    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      background-color="#4064e1"
      text-color="#fff"
      active-text-color="#00fecf"
      router
    >
      <!-- 没有子级的菜单 -->
      <el-menu-item
        :index="item.path + ''"
        v-for="(item, i) in noChildren"
        :key="i"
        :route="item.path"
      >
        <i :class="item.icon" class="iconfont"></i>
        <span>{{ item.name }}</span>
      </el-menu-item>
      <!-- 有子级的菜单 -->

      <el-submenu
        :index="item.path + ''"
        v-for="item in hasChildren"
        :key="item.path"
      >
        <template slot="title">
          <i :class="item.icon" class="iconfont"></i>
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item
          v-for="subitem in item.children"
          :key="subitem.path"
          :index="subitem.path + ''"
          :route="subitem.path"
        >
          <template slot="title">
            <i :class="subitem.icon" class="iconfont"></i>
            <span>{{ subitem.name }}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </el-col>
</template>

<script>
import { getUserInfo } from '@/api/common';
export default {
  data() {
    return {
      ho: new Date().getHours,
      userInfo: {},
      menuList: [],
      origin:'http://127.0.0.1:8000/'
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
    
  },
  computed: {
    noChildren() {
      return this.menuList.filter((item) => item.children.length == 0);
    },
    hasChildren() {
      return this.menuList.filter((item) => item.children.length > 0);
    },
    isCollapse() {
      return this.$store.state.tab.isCollapse;
    },
  },

  created() {
    // getUserInfo().then((res)=>{
    //   this.userInfo = res;
    //   window.localStorage.setItem('user_info',JSON.stringify(res))
    // })
  },
  mounted() {
    setTimeout(()=>{
      this.menuList = JSON.parse(localStorage.getItem('menus'))
    this.userInfo = JSON.parse(localStorage.getItem('user_info'))
    },500)
    
  },
};
</script>

<style lang="less" scoped>
a {
  color: white;
  text-decoration: none;
}
.el-col {
  // background: linear-gradient(#4064e1, #409cce);
  width: auto;
  background: #4064e1;
  min-height: 100%;
  height: auto;
  // height: 12rem;

  h3 {
    text-align: center;
    color: #fff;
    font-weight: 500;
    margin-top: 0.125rem;
    font-size: 0.3rem;
  }
  .head-portrait {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0.25rem 0;
    .block {
      img {
        width: 1rem;
        height: 1rem;
        border-radius: 0.5rem;
        box-shadow: rgba(238, 239, 241, 0.658) 0rem 0rem 0.125rem 0.0125rem;
      }
      margin-bottom: 0.125rem;
    }
    p {
      color: white;
    }
  }
}
.el-menu {
  border: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-submenu__title {
  font-size: 0.2125rem;
}
.el-submenu .el-menu-item {
  height: 0.5rem;
  line-height: 0.5rem;
  padding: 0 0.45rem;
  min-width: 2.5rem;
}
.el-submenu__title,
.el-menu-item i {
  color: white;
  margin-right: 4px;
}
.el-menu-item.is-active {
  color: rgb(0, 254, 207);
  i {
    color: rgb(0, 254, 207);
  }
}
.el-submenu__title i {
  color: white !important;
  margin-right: 4px;
}
.el-submenu__title i::after {
  color: white;
}
</style>